<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员页面</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- css文件 -->
    <link rel="stylesheet" href="./css/administrator.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
</head>

<body>
    <div class="container-fluid">
        <!-- welcome -->
        <div class="row clearfix" id="head">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h1>
                        你好<small>欢迎来到管理员页面</small>
                    </h1>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <!-- 左边栏  管理员信息 -->
            <div class="col-md-3 column">
                <div id="adm_msg" align="center">
                    <img src="img/head.jpg" alt="管理员头像" id="adm_img">
                    <p id="adm_name">管理员</p>
                    <button class="btn btn-default" id="logout">退出登录</button>
                </div>

                <script>
                    window.onload = function () {
                        var name = $.cookie("user");
                        var userimg = $.cookie("image");
                        var adm_img = document.getElementById('adm_img');
                        $("#adm_name").html(name);
                        adm_img.src = userimg;
                        $("#logout").click(function () {
                            if (confirm("确定要退出吗？")) {
                                $.removeCookie('user');
                                window.location.href = "./admLogin.html";
                            }
                        })

                    }
                </script>
            </div>
            <!-- main  网站信息  音乐审核 -->
            <div class="col-md-9 column">
                <div class="tabbable" id="tabs-715797">
                    <!-- 这里是切换栏 -->
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#panel-259591" data-toggle="tab">网站数据</a>
                        </li>
                        <li>
                            <a href="#panel-995738" data-toggle="tab">音乐审核</a>
                        </li>
                        <li>
                            <a href="#panel-995739" data-toggle="tab">文章审核</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <!-- 网站信息 -->
                        <div class="tab-pane active" id="panel-259591">
                            <div class="col-md-12" id="sta_msg">
                                <div class="col-md-3 col-sm-6">
                                    <div class="sta_msg" id="tod_view">
                                        <p>今日浏览量:</p>
                                        <span>num</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="sta_msg" id="total_view">
                                        <p>总浏览量:</p>
                                        <span>num</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="sta_msg" id="yes_post">
                                        <p>昨日帖数:</p>
                                        <span>num</span>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="sta_msg" id="total_post">
                                        <p>总帖数:</p>
                                        <span>num</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="perc">
                                    文章类型占比
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="musicReviews">
                                            <p></p>

                                        </div>
                                        <div class="progress-bar progress-bar-info" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="musicStory">
                                            <p>音乐故事：60%</p>

                                        </div>
                                    </div>
                                </div>
                                <div class="perc">
                                    曲风占比
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-success" id="mandarin" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <p>华语</p>
                                            
                                        </div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-info" id="western" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <p>欧美</p>
                            
                                        </div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-warning" id="rock" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <p>摇滚</p>
                                            
                                        </div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" id="pop" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <p>流行</p>
                                            
                                        </div>
                                    </div>
                                    <div class="progress progress-striped">
                                        <div class="progress-bar progress-bar-danger" id="rap" role="progressbar"
                                            aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                                            <p>嘻哈</p>
                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="chart-container" style="position: relative; height:20vh; width:20vw">
                                    <canvas id="myChart" width="200" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                        <!-- 音乐审核 -->
                        <div class="tab-pane" id="panel-995738">
                            <h3>未审核的音乐</h3>
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>歌曲名</th>
                                        <th>专辑</th>
                                        <th>上传时间</th>
                                        <th>试听</th>
                                        <th> 审核结果</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">

                                </tbody>
                            </table>
                            <ul class="pagination" id="fenye">
                                <li><a href="#">&laquo;</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                            <audio src="" id="ado" controls=""></audio>
                        </div>
                        <!-- 文章审核 -->
                        <div class="tab-pane" id="panel-995739">
                            <div class="col-md-6">
                                <h3>全部文章</h3>
                                <h4 id="alltext">共：篇</h4>
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>文章标题</th>
                                            <th>封面</th>
                                            <th> 审核</th>
                                        </tr>
                                    </thead>
                                    <tbody id="abody">
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h3>主页文章</h3>
                                <h4 id="hometext">已展示：篇</h4>
                                <h4 id="message"></h4>
                                <table class="table table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>文章标题</th>
                                            <th>封面</th>
                                            <th>取消放置主页</th>
                                        </tr>
                                    </thead>
                                    <tbody id="cbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/administrator.js"></script>
</body>

</html>